<template>
  <el-dialog
    class="personnel-info-water-model"
    :title="title"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(1000)"
    :before-close="handleCancel">
    <div class="content">
      <div class="form-container">
        <!-- 基本信息-->
        <el-form
          :model="baseForm"
          :rules="rules"
          size="medium"
          ref="ruleForm"
          class="rule-form"
          :label-width="$setRem(140)"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item label="姓名" prop="userName" required>
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入" v-model="baseForm.userName"></el-input>
                <span v-else class="detail-text">{{ baseForm.userName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="籍贯" prop="nativePlace" required>
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入籍贯" v-model="baseForm.nativePlace"></el-input>
                <span v-else class="detail-text">{{ baseForm.nativePlace }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="联系方式" prop="userPhone" required>
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入" v-model="baseForm.userPhone"></el-input>
                <span v-else class="detail-text">{{ baseForm.userPhone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="身份证号" prop="idCard" required>
                <el-input v-if="hasAdd || hasEdit"  placeholder="请输入" v-model="baseForm.idCard"></el-input>
                <span v-else class="detail-text">{{ baseForm.idCard }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="进场时间" prop="inDate" required>
                <el-date-picker
                  v-if="hasAdd || hasEdit"
                  v-model="baseForm.inDate"
                  format="yyyy-MM-d"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择进场时间">
                </el-date-picker>
                <span v-else class="detail-text">{{ baseForm.inDate }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="退场时间" prop="outDate">
                <el-date-picker
                  v-if="hasAdd || hasEdit"
                  v-model="baseForm.outDate"
                  format="yyyy-MM-d"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="请选择退场时间">
                </el-date-picker>
                <span v-else class="detail-text">{{ baseForm.outDate }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属机构" prop="company">
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入机构" v-model="baseForm.company"></el-input>
                <span v-else class="detail-text">{{ baseForm.company }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="所属班组" prop="teamName" required>
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入班组" v-model="baseForm.teamName"></el-input>
                <span v-else class="detail-text">{{ baseForm.teamName }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="部门" prop="departName">
                <el-input v-if="hasAdd || hasEdit" placeholder="请输入部门" v-model="baseForm.departName"></el-input>
                <span v-else class="detail-text">{{ baseForm.departName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="人员类别" prop="userType" required>
                <el-select v-if="hasAdd || hasEdit" placeholder="请选择人员类别" v-model="baseForm.userType">
                  <el-option value="管理人员" label="管理人员">管理人员</el-option>
                  <el-option value="劳务人员" label="劳务人员">劳务人员</el-option>
                </el-select>
                <span v-else class="detail-text">{{ baseForm.userType }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="地址" prop="address">
                <el-input v-if="hasAdd || hasEdit" v-model="baseForm.address"></el-input>
                <span v-else class="detail-text">{{ baseForm.address }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item v-if="hasDetail" label="年龄" prop="age" required>
                <el-input-number v-if="hasAdd || hasEdit" :controls="false" laceholder="请输入" v-model="baseForm.age"></el-input-number>
                <span v-else class="detail-text">{{ baseForm.age }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="hasDetail">
            <el-col :span="12">
              <el-form-item label="状态" prop="userStatus">
                <span class="detail-text">{{ baseForm.userStatus }}</span>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
          </el-row>
        </el-form>
      </div>
    </div>
    <span class="dialog-footer" v-if="!hasDetail">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        :loading="loading"
        @click="handleSave">
        保 存
      </el-button>
    </span>
  </el-dialog>
</template>

<script>
import { addressData } from '@/utils/address';

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 表单编辑回填数据
    formData: {
      type: Object,
      default: () => ({})
    },
    // 新增、编辑
    type: {
      type: String,
      default: 'add'
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 地址区划数据
      addressData,
      // 基本信息
      baseForm: {
        id: '',
        userName: '',
        company: '',
        age: '',
        inDate: '',
        outDate: '',
        nationality: '',
        nativePlace: '',
        idCard: '',
        teamName: '',
        departName: '',
        userType: '',
        userPhone: '',
        address: '',
        userStatus: '',
      },
      rules: {
        userName: [
          { required: true, message: '请输入姓名' },
        ],
        age: [
          { required: true, message: '请输入年龄' },
        ],
        userPhone: [
          { required: true, message: '请输入联系方式' },
        ],
        idCard: [
          { required: true, message: '请输入身份证号' },
          {
            pattern: /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: '请输入正确的身份证号码'
          }
        ],
        nativePlace: [
          { required: true, message: '请输入籍贯' },
        ],
        userType: [
          { required: true, message: '请选择人员类别' },
        ],
        teamName: [
          { required: true, message: '请输入班组' },
        ],
        inDate: [
          { required: true, message: '请选择进场时间' },
        ],
      }
    };
  },
  computed: {
    title() {
      return this.hasAdd
        ? '新增人员'
        : this.hasEdit ? '编辑人员' : '人员详情';
    },
    // 是否为新增
    hasAdd() {
      return this.type === 'add';
    },
    hasDetail() {
      return this.type === 'detail';
    },
    hasEdit() {
      return this.type === 'edit';
    }
  },
  watch: {
    formData: {
      deep: true,
      immediate: true,
      handler(data) {
        if (data) {
          Object.keys(this.baseForm).forEach(key => {
            this.baseForm[key] = data[key] || '';
          });
        }
      }
    },
    visible(val) {
      if (!val) {
        Object.keys(this.baseForm).forEach(key => {
          this.baseForm[key] = '';
        });
      }
    }
  },
  methods: {
    // 取消、关闭
    handleCancel() {
      this.$emit('cancel', false);
    },
    handleSave() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.$emit('submit', this.baseForm);
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';

  .personnel-info-water-model {
    .content {
      width: 100%;
      min-height: 500px;
      .tabs {
        width: 100%;
        height: 30px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;
        border-style: solid;
        border-width: 0 0 1px 0;
        border-image: linear-gradient(to right, transparent 0%, #4f5073 35%, #6d719d 50%, #4f5073 65%, transparent 100%) 1 1;
        li {
          width: 100px;
          height: 100%;
          color: $mainColor;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          border-radius: 5px;
          transition: all .2s;
          &.active {
            color: #fff;
            background: $lightBtnBg;
          }
        }
      }
      .form-container {
        width: 100%;
        .btn {
          width: 100%;
          height: 40px;
          text-align: right;
        }
        .el-col {
          margin-bottom: 20px;
        }
        /deep/ .el-form {
          .el-form-item__label {
            color: #fff;
          }
          .el-form-item__content {
            width: 300px;
            .el-select, .el-cascader, .el-date-editor {
              width: 100%;
            }
            input {
              background-color: #0e0e2d;
              border: none;
              color: #fff;
            }
            .detail-text {
              width: 100%;
              height: 100%;
              display: inline-block;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: $mainColor;
            }
            .img-list {
              width: 100%;
              height: 100%;
              display: flex;
              img {
                display: inline-block;
                width: 100px;
                height: 120px;
                margin: 10px 20px 0 0;
                &.img-item {
                  width: 260px;
                  height: 140px;
                }
              }
            }
          }
        }
        /deep/ .el-form-item {
          margin-bottom: 15px;
        }
      }
    }
    .dialog-footer {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .el-dialog__body {
      padding-top: 5px;
    }
  }
</style>
